import React from 'react';
import { Row, Col, Tag, Avatar, Popover, Skeleton, Tooltip } from 'antd';
import { Link } from 'umi';
import { newTabProps } from '@/utils/tab';
import IconFont from '@/components/IconFont';
import { getEmployeeInfo } from '@/pages/OnboardAndLeave/TransferPost/services';
import { useRequest, defaultFormatResult } from '@/hooks';
import { formatData } from '@/hooks/useEmployeeData';
import { renderFormText as renderText } from '@/utils/utils';
import Employee from '@/pages/Organization/OrgFlow/components/employee';

const LabelItem = ({ label, text }) => (
    <div style={{ fontSize: 12 }}>
        <span style={{ color: 'rgba(0,0,0,0.25)', paddingRight: 6 }}>{label}:</span>
        <span>{renderText(text)}</span>
    </div>
);

const iconStyle = {
    fontSize: 16,
    color: '#E5E5E5',
    marginRight: 7
};

// flex没法用gutter
const middleColStyle = { style: { marginRight: 22 } };
const bottomColStyle = { style: { marginRight: 90 } };

const ProfileCard = ({ employeeCode: originEmployeeCode, initialData, loading: outerLoading = false, ...rest }) => {
    const { data = initialData ?? {}, loading } = useRequest(
        () => getEmployeeInfo({ employeeCode: originEmployeeCode, useLastApprove: false }),
        {
            ready: !!originEmployeeCode && !initialData,
            ...defaultFormatResult
        }
    );

    const { data: leaderData = {} } = useRequest(() => getEmployeeInfo({ employeeCode: data.leaderCode }), {
        ready: !!data.leaderCode,
        ...defaultFormatResult
    });

    const employeeCode = originEmployeeCode || initialData.employeeCode;

    const {
        employeeName,
        administrativeOrganizationName,
        // fullDepartmentName,
        // rankName,
        rankValue,
        leaderName,
        chargeNumber,
        timeOfEntry,
        tryDuration,
        positionName,
        workNature,
        userName,
        dutyCode,
        avatarFile = [],
        partTimeDuty,
        serviceStatusName,
        tryDurationText,
        workNatureUnit,
        fullOrganizationName,
        finalOrganizationName
    } = formatData(data);

    const [visible, setVisible] = React.useState(false);

    const leaderPopover = text => {
        if (!text) return renderText();
        return (
            <Popover
                visible={visible}
                onVisibleChange={setVisible}
                content={
                    <Employee
                        employeeCode={leaderData.employeeCode}
                        organizationCode={leaderData.organizationCode}
                        organizationType={leaderData.organizationType}
                        callback={() => {
                            setVisible(false);
                        }}
                    />
                }
                placement="bottomLeft"
            >
                <span style={{ cursor: 'pointer' }}>{renderText(text)}</span>
            </Popover>
        );
    };

    return (
        <Skeleton loading={loading || outerLoading} active>
            <Row type="flex" align="middle" gutter={22} style={{ color: 'rgba(0, 0, 0, 0.65)' }} {...rest}>
                <Col>
                    <Avatar src={avatarFile[0]?.url} size={72} />
                </Col>
                <Col>
                    <Row type="flex">
                        <Link
                            to={{
                                pathname: '/office/personnelManagement/organization/employeeList/detail',
                                query: {
                                    dutyCode,
                                    employeeCode
                                },
                                ...newTabProps
                            }}
                        >
                            <span style={{ fontSize: 16, color: '#000' }}>{renderText(employeeName)}</span>
                            {userName && <span style={{ color: 'rgba(0, 0, 0, 0.65)' }}>&nbsp;/&nbsp;{userName}</span>}
                        </Link>

                        <div style={{ marginLeft: 8 }}>
                            {/* <Tag>
                                {positionName}/{rankValue}
                            </Tag> */}
                            <Tag>{serviceStatusName}</Tag>
                            {workNature && <Tag>{workNatureUnit}</Tag>}
                        </div>
                    </Row>
                    <Row type="flex" style={{ margin: '6px 0 12px 0' }}>
                        <Col {...middleColStyle}>
                            <Row type="flex" align="middle">
                                <IconFont icon="icondefault_company_pic_default" style={iconStyle} />
                                {renderText(administrativeOrganizationName)}
                            </Row>
                        </Col>
                        <Col {...middleColStyle}>
                            <Row type="flex" align="middle">
                                <IconFont icon="iconzuzhijiagouICON" style={iconStyle} />
                                <Tooltip title={fullOrganizationName}>{finalOrganizationName}</Tooltip>
                            </Row>
                        </Col>
                        <Col {...middleColStyle}>
                            <Row type="flex" align="middle">
                                <IconFont icon="iconzhiweiguanliICON" style={iconStyle} />
                                {/* {`${renderText(rankName)}/${renderText(rankValue)}`} */}
                                {`${renderText(positionName)}/${renderText(rankValue)}`}
                            </Row>
                        </Col>
                    </Row>
                    <Row type="flex">
                        <Col {...bottomColStyle}>
                            <LabelItem label="直接上级" text={leaderPopover(leaderName)} />
                        </Col>
                        <Col {...bottomColStyle}>
                            <LabelItem label="分管下属" text={chargeNumber} />
                        </Col>
                        <Col {...bottomColStyle}>
                            <LabelItem label="兼任" text={partTimeDuty} />
                        </Col>
                        <Col {...bottomColStyle}>
                            <LabelItem label="入职日期" text={timeOfEntry} />
                        </Col>
                        {tryDuration && (
                            <Col {...bottomColStyle}>
                                <LabelItem label="试用期" text={tryDurationText} />
                            </Col>
                        )}
                    </Row>
                </Col>
            </Row>
        </Skeleton>
    );
};

export default ProfileCard;
